2 * JavaScript for Special:Preferences: Tab navigation.
6 var $preferences
, tabs
, wrapper
, previousTab
, switchingNoHash
;
8 $preferences
= $( '#preferences' );
10 // Make sure the accessibility tip is focussable so that keyboard users take notice,
11 // but hide it by default to reduce visual clutter.
12 // Make sure it becomes visible when focused.
13 $( '<div>' ).addClass( 'mw-navigation-hint' )
14 .text( mw
.msg( 'prefs-tabs-navigation-hint' ) )
19 .insertBefore( '.mw-htmlform-ooui-wrapper' );
21 tabs
= new OO
.ui
.IndexLayout( {
23 // Do not remove focus from the tabs menu after choosing a tab
27 mw
.config
.get( 'wgPreferencesTabs' ).forEach( function ( tabConfig
) {
28 var panel
, $panelContents
;
30 panel
= new OO
.ui
.TabPanelLayout( tabConfig
.name
, {
32 label
: tabConfig
.label
34 $panelContents
= $( '#mw-prefsection-' + tabConfig
.name
);
36 // Hide the unnecessary PHP PanelLayouts
37 // (Do not use .remove(), as that would remove event handlers for everything inside them)
38 $panelContents
.parent().detach();
40 panel
.$element
.append( $panelContents
);
41 tabs
.addTabPanels( [ panel
] );
43 // Remove duplicate labels
44 // (This must be after .addTabPanels(), otherwise the tab item doesn't exist yet)
45 $panelContents
.children( 'legend' ).remove();
46 $panelContents
.attr( 'aria-labelledby', panel
.getTabItem().getElementId() );
49 wrapper
= new OO
.ui
.PanelLayout( {
54 wrapper
.$element
.append( tabs
.$element
);
55 $preferences
.prepend( wrapper
.$element
);
56 $( '.mw-prefs-faketabs' ).remove();
58 function enhancePanel( panel
) {
59 if ( !panel
.$element
.data( 'mw-section-infused' ) ) {
60 // mw-htmlform-autoinfuse-lazy class has been removed by replacing faketabs
61 mw
.hook( 'htmlform.enhance' ).fire( panel
.$element
);
62 panel
.$element
.data( 'mw-section-infused', true );
66 function onTabPanelSet( panel
) {
67 var scrollTop
, active
;
69 if ( switchingNoHash
) {
72 // Handle hash manually to prevent jumping,
73 // therefore save and restore scrollTop to prevent jumping.
74 scrollTop
= $( window
).scrollTop();
75 // Changing the hash apparently causes keyboard focus to be lost?
76 // Save and restore it. This makes no sense though.
77 active
= document
.activeElement
;
78 location
.hash
= '#mw-prefsection-' + panel
.getName();
82 $( window
).scrollTop( scrollTop
);
85 tabs
.on( 'set', onTabPanelSet
);
89 * @param {string} name the name of a tab without the prefix ("mw-prefsection-")
90 * @param {boolean} [noHash] A hash will be set according to the current
91 * open section. Use this flag to suppress this.
93 function switchPrefTab( name
, noHash
) {
95 switchingNoHash
= true;
97 tabs
.setTabPanel( name
);
98 enhancePanel( tabs
.getCurrentTabPanel() );
100 switchingNoHash
= false;
104 // Jump to correct section as indicated by the hash.
105 // This function is called onload and onhashchange.
106 function detectHash() {
107 var hash
= location
.hash
,
108 matchedElement
, parentSection
;
109 if ( hash
.match( /^#mw-prefsection-[\w]+$/ ) ) {
110 mw
.storage
.session
.remove( 'mwpreferences-prevTab' );
111 switchPrefTab( hash
.replace( '#mw-prefsection-', '' ) );
112 } else if ( hash
.match( /^#mw-[\w-]+$/ ) ) {
113 matchedElement
= document
.getElementById( hash
.slice( 1 ) );
114 parentSection
= $( matchedElement
).parent().closest( '[id^="mw-prefsection-"]' );
115 if ( parentSection
.length
) {
116 mw
.storage
.session
.remove( 'mwpreferences-prevTab' );
117 // Switch to proper tab and scroll to selected item.
118 switchPrefTab( parentSection
.attr( 'id' ).replace( 'mw-prefsection-', '' ), true );
119 matchedElement
.scrollIntoView();
124 $( window
).on( 'hashchange', function () {
125 var hash
= location
.hash
;
126 if ( hash
.match( /^#mw-[\w-]+/ ) ) {
128 } else if ( hash
=== '' ) {
129 switchPrefTab( 'personal', true );
132 // Run the function immediately to select the proper tab on startup.
133 .trigger( 'hashchange' );
135 // Restore the active tab after saving the preferences
136 previousTab
= mw
.storage
.session
.get( 'mwpreferences-prevTab' );
138 switchPrefTab( previousTab
, true );
139 // Deleting the key, the tab states should be reset until we press Save
140 mw
.storage
.session
.remove( 'mwpreferences-prevTab' );
143 $( '#mw-prefs-form' ).on( 'submit', function () {
144 var value
= tabs
.getCurrentTabPanelName();
145 mw
.storage
.session
.set( 'mwpreferences-prevTab', value
);